<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>for循环做隔行换色+全选案例</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    a{text-decoration: none;}
    table{
      width: 500px;
      border: 1px solid #d6a2c6;
      margin:100px auto;
      text-align: center;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid #d6a2c6;
    }
    tr{
      height: 50px;
    }
    
  </style>
</head>
<body>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox">全选</th>
          <th>标题</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>邮件</td>
          <td><a href="#">未读</a></td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>邮件</td>
          <td><a href="#">未读</a></td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>邮件</td>
          <td><a href="#">未读</a></td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>邮件</td>
          <td><a href="#">未读</a></td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>邮件</td>
          <td><a href="#">未读</a></td>
        </tr>
    </table>
  <script type="text/javascript">
     var Tr = document.getElementsByTagName('tr');
     var Ipt = document.getElementsByTagName('input');
     for (var i = 1; i < Tr.length; i++) {
       if(i % 2){
        Tr[i].style.background = "green";
       }else{
       Tr[i].style.background = "yellow";
       }
     };
     Ipt[0].onclick = function (){
      for (var i = 1; i <= Ipt.length - 1; i++) {
        if(Ipt[0].checked == true){
          Ipt[i].checked = true;
        }else{
          Ipt[i].checked = false;
        }
      };
     }
  </script>
</body>
</html>